<template>
    <a-modal v-model:open="showModal" :title="formTitle" @ok="confirm">
        <div class="px-[40px] mt-[30px]">
            <a-form :model="formData" ref="formRef" :label-col="{ style: { width: '80px' } }">
                <a-form-item label="头像" name="head_img">
                    <upload-image v-model="formData.head_img" width="60px" height="60px" imageText="" />
                </a-form-item>
                <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入账号' }]">
                    <a-input v-model:value="formData.username" placeholder="请输入账号" show-count :maxlength="10" />
                </a-form-item>
                <a-form-item label="姓名" name="real_name">
                    <a-input v-model:value="formData.real_name" placeholder="请输入姓名" />
                </a-form-item>
                <a-form-item label="密码" name="password" v-if="formData.uid > 0">
                    <a-input v-model:value="formData.password" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item label="密码" name="password" v-else
                    :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码至少6位' }, { max: 32, message: '密码太长了' }]">
                    <a-input v-model:value="formData.password" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item label="角色" name="role_id" :rules="[{ required: true, message: '请选择角色' }]">
                    <a-select v-model:value="formData.role_id" :options="roleList" :field-names="{ label: 'role_name', value: 'role_id', options: 'children' }"></a-select>
                </a-form-item>

                <a-form-item label="状态" name="status">
                    <a-radio-group v-model:value="formData.status" name="status">
                        <a-radio :value="1">正常</a-radio>
                        <a-radio :value="0">禁用</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue';
import { message } from 'ant-design-vue';
import type { SelectProps } from 'ant-design-vue';
import UploadImage from '@/components/upload-image/index.vue';
import { addAdminUser, editAdminUser,adminRoleList } from '@/utils/api/sys';

const showModal = ref<boolean>(false);

/**
 * 表单原始数据
 */
const initialFormData = {
    uid: 0,
    username: '',
    real_name: '',
    head_img: '',
    password: '',
    role_id: null,
    status: 1,
}

const roleList = ref<SelectProps['options']>([]);

onMounted(() => {
    getRoleList();
});

// 初始化数据
const getRoleList = () => {
    adminRoleList({}).then((res: any) => {
        roleList.value = res.data;
    })
};

const formData: Record<string, any> = reactive({ ...initialFormData })

const formRef = ref();

const formTitle = ref('添加管理员');

const setFormData = async (row: any = null) => {
    if (row == null) {
        formTitle.value = '添加管理员';
        Object.assign(formData, initialFormData);
    } else {
        formTitle.value = '编辑管理员';
        Object.assign(formData, row);
    }
}



const confirm = (e: MouseEvent) => {
    formRef.value
        .validate()
        .then(() => {
            if (formData.uid > 0) {
                editAdminUser(formData).then((res: any) => {
                    if (res.code == 200) {
                        message.success(res.message)
                        showModal.value = false;
                        setTimeout(function () {
                            emit('complete');
                        }, 1000);
                    } else {
                        message.error(res.message)
                    }
                })
            } else {
                addAdminUser(formData).then((res: any) => {
                    if (res.code == 200) {
                        message.success(res.message)
                        showModal.value = false;
                        setTimeout(function () {
                            emit('complete');
                        }, 1000);
                    } else {
                        message.error(res.message)
                    }
                })
            }
        });
};

const emit = defineEmits(['complete'])

defineExpose({
    showModal,
    setFormData
})
</script>